<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="list" border style="width: 100%">
      <el-table-column prop="marchineId" label="货柜编号" min-width="200" />
      <el-table-column prop="marchinePosition" label="货柜名称" min-width="200" />
      <el-table-column label="货柜在线状态" min-width="200">
        <template slot-scope="scope">
          <div :class="scope.row.marchineStatus === '1' ? 'success' : 'Warning'">{{ scope.row.marchineStatus === '1' ? "在线" : "离线" }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="marchineCreateTime" label="货柜添加时间" min-width="200" />
      <el-table-column prop="stock" label="货柜库存数量" min-width="200" />
      <el-table-column
        label="操作"
        fixed="right"
        min-width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="channelConfigs(scope.row)"
          >
            货道管理
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="resetConfig(scope.row)"
            v-loading="btnLoading"
          >
            复位
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="u-flex u-row-center u-m-t-10">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pagination.pageSize"
        layout="prev, pager, next"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
  </div>
</template>
<script>
import { machineList, deleteGoods } from "@/api/user";
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      loading: false,
      // currentPage: 1,
      queryData: {
        status: "", //	商品状态 0 下架 1 上架
        name: "",
      },
      pagination: {
        pageSize: 1,
        total: 1,
      },
      typeStatus: [
        { id: "", name: "不限" },
        { id: 0, name: "商品详情" },
        { id: 1, name: "H5" },
      ],
      btnLoading: false
    };
  },
  created() {
    this.getList();
  },
  computed: {
    currentPage: {
      get() {
        return this.queryData.pageIndex + 1;
      },
      set() {},
    },
  },
  methods: {
    getList() {
      this.loading = true
      machineList().then((res) => {
        this.list = res.data;
        this.loading = false;
      });
    },
    hanleSearch(reset) {
			if (reset) {
				this.queryData.name = ''
				this.queryData.status = ''
			}
      this.getList();
    },
    handleSizeChange(val) {
      // this.queryData.pageIndex = val - 1
      // this.getList()
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val - 1;
      this.getList();
    },
    handleEdit(id) {
      this.$router.push(`/permission/page/editProduct?goodsId=${id}`)
    },
    handleDelete(goodsId) {
      this.$confirm("确认要删除该商品吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.confirmDelete(goodsId);
        })
        .catch((err) => {
					console.log('err', err)
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    confirmDelete(goodsId) {
      deleteGoods(goodsId).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.getList();
      });
    },
    formatter: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter1: function (row) {
      return this.$moment(row).format("YYYY-MM-DD HH:mm:ss");
    },
    formatter2: function (row) {
      return this.$moment(row.createdTime).format("YYYY/MM/DD");
    },
    addProduct() {
      this.$router.push("/permission/page/addProduct");
    },
		channelConfigs(row) {
			this.$router.push({
        path: "/property/channelConfig",
        query: {
          marchineId: row.marchineId
        }
      })
		},
    resetConfig(row) {
      this.btnLoading = true
      axios.request({
        url: 'https://xingyin.xingyuanji.com/service/fuwei',
        method: 'post',
        data: {marchineId: row.marchineId}
      }).then(res => {
        if (res && res.status === 200) {
          this.$message({
            type: "success",
            message: '操作成功',
          });
          this.getList();
        }
      }).finally(() => {
        this.btnLoading = false;
      });
    }
  },
}
</script>
<style scoped>
.success {
	color: #67C23A;
}
.Warning {
	color: #E6A23C;
}
</style>
